﻿{include file="base/header"}
<div class="swiper banner clear">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="/static/images/nyban2.jpg" />
    </div>
  </div>
  <script>
    var banner = new Swiper(".banner", {
      pagination: {
        el: ".banner .swiper-pagination",
		clickable: true,
      },
	  //autoplay: {
//		pauseOnMouseEnter: true,
//		disableOnInteraction: false,
//	  },
	  //effect:'fade'
	  on:{
		init: function(){swiperAnimate(this);}, 
		slideChange: function(){ swiperAnimate(this);} 
	  },
    });
  </script>
</div>
<div class="pro_dt clear">
  <div class="w">
    <div class="comflex wow fadeInUp">
      <div class="pro_dt_pic comflex2">
        <div class="clear comflex">
          <div thumbsSlider="" class="swiper pro_sm">
            <div class="swiper-wrapper">
			{volist name="files" id="vo"}
              <div class="swiper-slide">
                <div class="pic"><img class="df_pic" src="/static/images/df1.png" /><div class="pic_w comflex2"><img src="{$vo}" /></div></div>
              </div>
			{/volist}  
            </div>
          </div>
          <div class="swiper pro_big">
            <div class="swiper-wrapper">
			{volist name="files" id="vo"}
              <div class="swiper-slide">
                <div class="pic"><img class="df_pic" src="/static/images/df1.png" /><div class="pic_w comflex2"><img src="{$vo}" /></div></div>
              </div>
			{/volist} 
            </div>
          </div>
          <script>
            var pro_sm = new Swiper(".pro_sm", {
              spaceBetween:20,
              direction : 'vertical',
              slidesPerView: 4,
              freeMode: true,
              watchSlidesProgress: true,
            });
            var pro_big = new Swiper(".pro_big", {
              autoplay: {
                pauseOnMouseEnter: true,
                disableOnInteraction: false,
              },
              thumbs: {
                swiper: pro_sm,
              },
            });
          </script>
        </div>
      </div>
      <div class="pro_dt_infor">
        <h3>{$info.title}<font>{$info.title_fu}</font></h3>
        <div class="pro_dt_txt">{$info.desc}</div>
        <ul>
          {volist name="canshu" id="v"}
		  <li><em>{$v[0]?$v[0].'：':''}</em>{$v[1]??''}</li>
		  {/volist}
        </ul>
      </div>
    </div>
    <div class="pro_show wow fadeInUp">
      <div class="pro_show_tit"><em>产品简介</em></div>
      <div class="pro_show_txt">
        {$info.info1|raw}
      </div>
    </div>
    <div class="pro_show wow fadeInUp">
      <div class="pro_show_tit"><em>功能特点</em></div>
      <div class="pro_show_txt">
        {$info.info2|raw}
      </div>
    </div>
    <div class="pro_show wow fadeInUp">
      <div class="pro_show_tit"><em>产品资质</em></div>
      <div class="pro_show_txt">
        {$info.info3|raw}
      </div>
    </div>
    <div class="pro_show wow fadeInUp">
      <div class="pro_show_tit"><em>产品视频</em></div>
      <div class="pro_show_txt">
        {$info.info4|raw}
      </div>
    </div>
    <div class="pro_tj_c wow fadeInUp">
      <div class="titc"><span>Products Recommended</span><em>产品推荐</em></div>
      <div class="pro_tj_w con3_pro">
        <div class="swiper pro_tj">
          <ul class="con3_list com swiper-wrapper">
	{sp:articles cid="$info['cate_id']" id="vo1" field='a_id,title,title_fu,img' order="sort asc,a_id asc" is_home="1"}
            <li class="swiper-slide">
              <a href="{:url('article/info',['id'=>$vo1['a_id']])}">
                <div class="pic"><img class="df_pic" src="/static/images/df1.png" /><div class="pic_w comflex2"><img src="{$vo1.img}" /></div></div>
                <p>{$vo1.title}<em>{$vo1.title_fu}</em></p>
                <div class="txt">
                  <div class="txt_c comflex2">
                    <div class="clear"><p>{$vo1.title}<em>{$vo1.title_fu}</em></p><i>查看更多</i></div>
                  </div>
                </div>
              </a>
            </li>
    {/sp:articles} 
          </ul>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <script>
        var pro_tj = new Swiper(".pro_tj", {
          slidesPerView:4,
          spaceBetween: '4%',
          autoplay: {
            pauseOnMouseEnter: true,
            disableOnInteraction: false,
          },
          navigation: {
              nextEl: ".con3_pro .swiper-button-next",
              prevEl: ".con3_pro .swiper-button-prev",
            },
          breakpoints: {
            640: {
              slidesPerView:2,
            },
            1024: {
              slidesPerView:4,
            },
          },
        });
      </script>
    </div>
  </div>
</div>

{include file="base/footer"}